<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/signon.css" type="text/css"
          media="screen"/>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>

<div th:replace="common/top"></div>

<div id="Catalog">
    <div id="signOn">
        <form action="/signOn" method="post">
            <h2>用户登录</h2>
            <br>
            <br>

            <span th:if="${session.signOnMsg}!=null">
               <p th:text="${session.signOnMsg}" style="color:red"></p>
               </span>

            <input type="text" id="loginMethod" name="loginMethod" th:value="${session.loginMethod}"
                   style="display: none">

            <div class="app-card-footer p-2 mt-auto">
                <button type="button" name="username-password" id="username-password" value="账号密码登录"
                        class="btn app-btn-secondary">账号密码登录
                </button>
                <button type="button" name="mobile-verification-code" id="mobile-verification-code"
                        value="手机验证码登录" class="btn app-btn-secondary">手机验证码登录
                </button>
            </div>

            <div class="login1">
                <div class="row">
                    <input type="text" id="username" name="username" th:value="${session.tryUsername}" placeholder=" ">
                    <label for="username">账号</label>
                </div>
                <div>
                    <span id="msg1" style="color: red;"></span>
                </div>
                <div class="row">
                    <input type="password" id="password" name="password" th:value="${session.tryPassword}"
                           placeholder=" ">
                    <label for="password">密码</label>
                </div>
            </div>
            <div>
                <span id="msg2" style="color: red;"></span>
            </div>

            <div class="login2">
                <div class="row">
                    <input type="text" id="phone" name="phone" th:value="${session.tryPhone}" placeholder=" ">
                    <label for="phone">手机号</label>
                </div>
                <div>
                    <span id="msg3" style="color: red;"></span>
                </div>
                <div class="row">
                    <input type="text" id="code" name="code" placeholder=" ">
                    <label for="code">验证码</label>
                </div>
                <div class="row2">

                </div>
            </div>

            <div class="row2">
                <button type="submit" id="send" formaction="/send" class="send btn app-btn-secondary"
                        onclick="return CheckPhone();">点击发送</button>
                <span id="msg4" style="color: red;"></span>
                <button type="submit" id="submit" class="btn app-btn-primary"
                        onclick="return CheckPost();">
                    登录
                </button>
            </div>
        </form>
        <div class="row3">
            <b>没有账号？<a href="/registerForm">点击注册</a></b>
        </div>
    </div>
</div>

<div th:replace="common/bottom">
</div>

</body>
</html>

<script>
    var loginMethod = $("#loginMethod").val();

    $(function () {
        console.log(loginMethod);
        loginChoose();

        Time();
    });

    function loginChoose() {
        if (loginMethod !== 2 && loginMethod !== '2') {
            $(".login2").hide();
            $("#send").hide();
            $(".login1").show();
        } else {
            $(".login1").hide();
            $(".login2").show();
            $("#send").show();
        }
    }

    $("#username-password").click(function () {
        loginMethod = 1;
        $("#loginMethod").val(loginMethod);
        loginChoose();
        console.log($("#loginMethod").val());
    });

    $("#mobile-verification-code").click(function () {
        loginMethod = 2;
        $("#loginMethod").val(loginMethod);
        loginChoose();
        console.log($("#loginMethod").val());
    });

    //检验是否输入
    function CheckPost() {
        console.log(loginMethod);
        if (loginMethod !== 2 && loginMethod !== '2') {
            console.log("账号密码方式登录");
            if (document.getElementById("username").value.trim().length === 0) {
                $("#msg1").html("账号不能为空");
                return false;
            }
            if (document.getElementById("password").value.trim().length === 0) {
                $("#msg2").html("密码不能为空");
                return false;
            }
        } else {
            console.log("验证码方式登录");
            if (document.getElementById("phone").value.trim().length === 0
                || document.getElementById("phone").value.trim().length !== 11) {
                $("#msg3").html("手机号码不正确");
                return false;
            }
            if (document.getElementById("code").value.trim().length !== 4) {
                $("#msg4").html("验证码输入有误");
                return false;
            }
        }
        return true;
    }

    //发送验证码
    function CheckPhone() {
        var phone = document.getElementById("phone").value.trim();
        if (phone.length !== 11) {
            $("#msg3").html("手机号码格式不正确");
            return false;
        } else {
            console.log("后台发送验证码");
            return true;
        }
    }

    function Time() {
        var signOnMsg = $("#signOnMsg").text();
        if (signOnMsg === "该手机号无管理员账号") {
            checkCode(2);
        } else if (signOnMsg === "验证码已发送") {
            checkCode(60);
        } else if (signOnMsg === "验证码发送失败，请稍后再试") {
            checkCode(2);
        }
    }

    function checkCode(time) {
        if (time == 0) {
            $("#send").removeAttr("disabled");//这个表示，从xx中移除yy属性，$(xx).remove()，移除xx元素
            $("#send").val("重新发送");
        } else {
            time--;
            $("#send").attr("disabled", true);
            $("#send").val("" + time + "s");
            setTimeout(function () {
                checkCode(time);
            }, 1000);
        }
    }

</script>